<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>非物质文化遗产主页NIIT</title>
    <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css">
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="css/style.css">
    <style>
        /*主页背景颜色：渐变色*/
        body{
            background: linear-gradient(to bottom,rgb(179, 9, 9) 5% ,white 80%)
        }
        /*回到顶部的内部样式*/
        .back-top{
            width:80px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            position: fixed;
            bottom: 120px;
            right: 30px;
        }
    </style>
</head>
<body> 
    <div class="container">
        <!-- header:页眉 -->
        <header id="header">
            <div class="row">
                <!-- 布局 -->
                <div class=" container d-flex "  > 
                    <!-- 非物质文化遗产的logo（响应式） -->
                    <div class="col-2 embed-responsive ">
                        <img src="images/logo2.jpg" alt="" class="rounded-circle img-fluid" style="width: 140px; height: 140px;">
                    </div>
                    <div class="col-10 " style="height: 50px;">
                        <!-- 非物质文化遗产文字 -->
                        <h1 class="logo " id="fy-logo">非物质文化遗产</h1>
                        <div >
                            <!-- 功能栏：分类的导航链接（胶囊导航） -->
                            <ul class="nav nav-pills">
                                <!-- 非物质文化遗产的全部和分类 -->
                                <li class="nav-item"><a class="nav-link" href="second-page.html" style="color:white;font-family:'KaiTi'; font-size:20px;">查看全部</a></li>
                                <li class="nav-item"><a class="nav-link" href="byys.html" style="color:white;font-family:'KaiTi';font-size:20px;">表演艺术</a></li>
                                <li class="nav-item"><a class="nav-link" href="ctsgy.html" style="color:white;font-family:'KaiTi';font-size:20px ;">传统手工艺</a></li>
                                <li class="nav-item"><a class="nav-link" href="ktct.html" style="color:white;font-family:'KaiTi';font-size:20px ;">口头传统</a></li>
                                <li class="nav-item"><a class="nav-link" href="ysyjq.html" style="color:white;font-family:'KaiTi';font-size:20px ;">仪式与节庆</a></li>
                                <li class="nav-item"><a class="nav-link" href="zrjyyzz.html" style="color:white;font-family:'KaiTi';font-size:20px ;">自然界与宇宙中</a></li>
                            </ul>
                        </div>
                        </div>     
                    </div>
            </div>
        </header>
        <hr>
            <div class="container-fluid">
                 <div class="carousel slide" id="home-carousel" data-ride="carousel" data-interval="3000">
                    <!-- carousel-indicators:指示器 -->
                    <ol class="carousel-indicators">
                    <li data-target="#home-carousel " data-slide-to="0" class="active"></li>
                    <li data-target="#home-carousel" data-slide-to="1"></li>
                    <li data-target="#home-carousel" data-slide-to="2"></li>
                    </ol>
                    <!-- 放置轮播图片的容器 -->
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src="images/changdiao.jpg" class="img-fluid" alt="">
                            <div class="carousel-caption"  style="color: white; font-size: 30px; font-family: KaiTi;"><b>蒙古族长调民歌</b></div>
                        </div>
                        <div class="carousel-item">
                            <img src="images/Beijing-Opera.jpg" alt="" class="img-fluid">
                            <div class="carousel-caption" style="color: white;font-size: 30px; font-family: KaiTi;"><b>京剧</b></div>
                        </div>
                        <div class="carousel-item">
                            <img src="images/kunqu1.jpg" alt=""  class="img-fluid">
                            <div class="carousel-caption" style="color: black;font-size: 30px; font-family: KaiTi;"><b>昆曲</b></div>
                        </div>
                        </div>
                        <!-- 轮播图的控件：上一页和下一页 -->
                        <div>
                            <!-- 上一页 -->
                        <a href="#home-carousel" class="carousel-control-prev" data-slide="prev">
                            <span class="carousel-control-prev-icon"></span>
                            </a>
                            <!-- 下一页 -->
                            <a href="#home-carousel" class="carousel-control-next" data-slide="next">
                            <span class="carousel-control-next-icon"></span>
                            </a>
                        </div>
                    </div>
            
                </div>
        <main> 
            <!-- 标题 -->
            <div class="con_tittle text-center">
                <p>
                   <b  style="background-color: rgb(179, 9, 9); color: white; font-family: KaiTi; font-size: 20px;">什么是非物质文化遗产</b> 
                </p>
            </div>
            <div class="row">
                <!-- 介绍非物质文化遗产的文字介绍 -->
                <div class="col-6" style="border:rgb(179, 9, 9) solid 3px ; padding: 5px;  left: 10px; height: 300px; font-family: KaiTi; font-size: 18px;">
                    <b>
                        <p>非物质文化遗产(Intangible Cultural Heritage)，是指各族人民世代相传，并视为其文化遗产组成部分的各种传统文化表现形式，以及与传统文化表现形式相关的实物和场所。 非物质文化遗产是一个国家和民族历史文化成就的重要标志，是优秀传统文化的重要组成部分。 "非物质文化遗产"与"物质文化遗产"相对，合称"文化遗产"。</p>
                    <p>2020年12月，随着"太极拳"和"送王船--有关人与海洋可持续联系的仪式及相关实践"的申遗成功，中国已有42个项目被联合国教科文组织列入非物质文化遗产名录(名册)，位居世界第一。</p>
                    </b>
                </div>
                <div class="col-6" style="left: 50px;"> 
                    <!-- 介绍非物质文化遗产的图片 -->
                    <img src="images/fy-introduction.jpg"  class="img-fluid" alt="" >
                </div>
            </div>
           <div class="row">
               <div class="col-6">
                   <!-- 标题 -->
                <div class="con_tittle text-center">
                    <p>
                       <b  style="background-color: rgb(179, 9, 9); color: white; font-family: KaiTi; font-size: 20px;">非物质文化遗产的分类</b> 
                    </p>
                </div>
                <!-- 介绍非遗种类的表单 -->
                <table class="table table-sm">
                    <thead>
                        <!-- 表头 -->
                        <tr>根据《中华人民共和国非物质文化遗产法》规定，非物质文化遗产是指各族人民世代相传并视为其文化遗产组成部分的各种传统文化表现形式，以及与传统文化表现形式相关的实物和场所。包括:</tr>
                    </thead>
                    <tbody>
                        
                        <tr  class="table-danger">
                            <td>(一)传统口头文学以及作为其载体的语言;</td>
                        </tr>
                        <tr>
                            <td>(二)传统美术、书法、音乐、舞蹈、戏剧、曲艺和杂技;</td>
                        </tr>
                        <tr class="table-danger">
                            <td>(三)传统技艺、医药和历法;</td>
                        </tr>
                        <tr>
                            <td>(四)社会实践、仪式、节庆活动;</td>
                        </tr>
                        <tr class="table-danger">
                            <td>(五)有关自然界和宇宙的知识和实践;</td>
                        </tr>
                    </tbody>
                </table>
               </div>
               <div class="col-6">
                   <!-- 标题 -->
                <div class="con_tittle text-center">
                    <p>
                       <b  style="background-color: rgb(179, 9, 9); color: white; font-family: KaiTi; font-size: 20px;">中国非物质文化遗产博览会</b> 
                    </p>
                </div>
                <!-- 有关于非物质文化博览会资料的表单 -->
                <table class="table table-sm">
                    <tbody>
                        <tr>
                            <td>第一届中国非物质文化遗产博览会于2010年10月在山东济南举办;</td>
                        </tr>
                        <tr class="table-danger">
                            <td>第二届中国非物质文化遗产博览会于2012年9月在山东枣庄举办;</td>
                        </tr>
                        <tr>
                            <td>第三届中国非物质文化遗产博览会于2014年10月在山东济南舜耕国际会展中心举办;</td>
                        </tr>
                        <tr class="table-danger">
                            <td>第四届中国非物质文化遗产博览会于2016年9月在山东济南国际会展中心举办;</td>
                        </tr>
                        <tr>
                            <td>第五届中国非物质文化遗产博览会于2018年9月在山东济南举办;</td>
                        </tr>
                        <tr class="table-danger">
                            <td>第六届中国非物质文化遗产博览会于2020年10月在山东省济南市国际时尚创意中心举办。</td>
                        </tr>
                    </tbody>
                </table>
               </div>
           </div>
            </div>
            <!-- 标题 -->
            <div class="con_tittle text-center">
                <p>
                   <b  style="background-color: rgb(179, 9, 9); color: white; font-family: KaiTi; font-size: 20px;">保护非物质文化</b> 
                </p>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-6">
                        <!-- 非物质文化遗产的分布地图（来自淘宝） -->
                        <img src="images/fy-map.jpg" alt="" class="img-fluid" style="height:100%;width:100%">
                    </div>
                    <div class="col-6">
                        <!-- 介绍为什么要保护非物质文化遗产的卡片 -->
                        <div class="card text-white" >
                            <img src="images/card-background.jpg" class="card-img-top img-fluid"  alt="...">
                            <div class="card-img-overlay" >
                                <h4 class="card-title" style=" font-family: KaiTi;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>为什么要保护非物质文化</b></h4>
                                <p class="card-text" style=" font-family: KaiTi; font-size: 18px;">非物质文化遗产是人类的无形文化遗产，代表着人类文化遗产的精神高度。非物质文化遗产是最古老也是最鲜活的文化历史传统，是国家、民族文化软实力的重要资源和武库，是民族精神、民族情感、民族历史、民族个性、民族气质、民族凝聚力和向心力的有机组成和重要表征。对非物质文化遗产性质的认识，保护和弘扬优秀的非物质文化遗产，对建设社会主义核心价值体系具有重要的作用。</p>
                                <p style=" font-family: KaiTi; font-size: 18px;">所以让我们一起保护我们的非物质文化吧！</p>
                                <!-- 加入保护非遗队伍的按钮 -->
                                <button type="button" class="btn btn-danger"  id="btn-join">点击加入</button>
                            </div>
                          </div>
                    </div>
                </div>
            </div>
            <!-- 回到顶部 -->
            <div class="back-top">
                <a href="#header">
                    <img src="images/top.gif" alt="" style="width: 60px; height: 80px;">
                </a>
            </div>
        </main>
        <p></p>
    </div>
    <!-- 页脚 -->
    <footer id="footer" class="container " style="color: white; height: 60px;border-top: 1px solid #dddddd;width: 100%;background-color: rgb(179, 9, 9);">
        <div class="row p-1">
            <div class="col text-right">
                <div>
                    法律条款 隐私保护 联系我们 常见问题
                </div>
            </div>
            
        </div>
        <div class="row p-1">
            <div class="col text-center">
                <div>
                    版权所有@NIIT
                </div>
            </div>
        </div>
    </footer>
    <script>
        /*JavaScript点击事件*/
        var btn = document.getElementById("btn-join");
        btn.onclick =function(){
            alert("欢迎你加入我们，让我们一起保护我们宝贵的非物质文化遗产叭！");
        }
    </script>
</body>
</html>